<template>
    <div class="page-container">

      <a-card style="width: 100%">
        <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState"
          style="width: 100%; display: flex;">
          <a-row :gutter="16">
            <a-col>
              <a-form-item name="carType" label="车型" style="margin-bottom: 0;">
                <a-select v-model:value="formState.carType" show-search style="width: 130px;" :options="cardTypeOptions"
                  placeholder="请选择车型" allowClear></a-select>
              </a-form-item>
            </a-col>
            <a-col>
              <a-form-item>
                <a-button type="primary">搜索</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-card>

      <a-card style="width: 100%; margin: 12px 0 12px 0;min-height: calc(100vh - 250px);">
        <a-row :gutter="18">
          <a-col>
            <a-button type="primary">新增车型</a-button>
          </a-col>
          <a-col>
            <a-button>批量删除</a-button>
          </a-col>
        </a-row>

        <br />
        <a-table :columns="columns" :data-source="devices" bordered :row-selection="rowSelection" resizable
          style="width: 100%;" :scroll="{ x: 1000, y: 480 }"
          :pagination="{ defaultCurrent: 1, defaultPageSize: 10, showSizeChanger: true, showQuickJumper: true, total: devices?.total || 100, showTotal: (total: number) => `${total} 条` }">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <span>
                <a-tag :color="record.status === 'used' ? 'green' : 'red'">{{ record.status ? '在用' : '弃用' }}</a-tag>
              </span>
            </template>
            <template v-if="column.key === 'connectionStatus'">
              <span>
                <a-tag :color="record.connectionStatus === 'online' ? 'green' : 'red'">{{ record.connectionStatus ?
                  '在线'
                  : '离线' }}</a-tag>
              </span>
            </template>
            <template v-if="column.key === 'executedCommand'">
              <span>
                <a>执行命令</a>
              </span>
            </template>
            <template v-if="column.key === 'action'">
              <span>
                <a>编辑</a>
                <a-divider type="vertical" />
                <a>下载证书</a>
                <a-divider type="vertical" />
                <a>启用</a>
                <a-divider type="vertical" />
                <a>弃用</a>
                <a-divider type="vertical" />
                <a>删除</a>
              </span>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </template>

  <script lang="ts" setup>
  import { computed, reactive, ref } from 'vue';

  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 100,
    },
    {
      title: '车型',
      dataIndex: 'carType',
      key: 'carType',
      width: 100,
    },
    {
      title: '操作系统',
      dataIndex: 'os',
      key: 'os',
      width: 150,
    },
    {
      title: '操作系统版本',
      dataIndex: 'osVersion',
      key: 'osVersion',
      width: 200,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
    },
    {
      title: '创建人',
      dataIndex: 'creator',
      key: 'creator',
      width: 150,
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
      width: 180,
    },
    {
      title: '操作',
      key: 'action',
      width: 280,
      fixed: 'right',
    },
  ];

  const devices = reactive([])

  const state = reactive<{
    selectedRowKeys: string | number[];
    loading: boolean;
  }>({
    selectedRowKeys: [], // Check here to configure the default column
    loading: false,
  });

  const hasSelected = computed(() => state.selectedRowKeys.length > 0);
  const onSelectChange = (selectedRowKeys: string | number[]) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    state.selectedRowKeys = selectedRowKeys;
  };
  const rowSelection = computed(() => ({
    selectedRowKeys: state.selectedRowKeys,
    onChange: onSelectChange,
  }))


  const formState = reactive({
    name: ''
  })
  const cardTypeOptions = [
  {
    label: 'C37TB',
    value: 'C37TB',
  },
  {
    label: 'C37T',
    value: 'C37T',
  },
  {
    label: 'C37T2',
    value: 'C37T2',
  },
  {
    label: 'C37T3',
    value: 'C37T3',
  },
]

  </script>

  <style scoped lang="less">
  .page-container {
    width: 100;
    height: 100%;
  }
  </style>
